<!--
* @Author: yx
* @Description: 对话框
* @Date: 2021-05-13
-->
<template>
  <div class="yx-dialog">
    <div v-el-drag-dialog="isDrag">
      <el-dialog
        :title="title"
        v-model="isShow"
        :width="width"
        :close-on-press-escape="closeOnPressEscape"
        :close-on-click-modal="closeOnClickModal"
        v-bind="$attrs"
      >
        <template #title>
          <slot name="title">
            <span :style="titleStyle">{{ title }}</span>
          </slot>
        </template>

        <div v-loading="loading">
          <slot>{{ content }}</slot>
        </div>

        <template #footer>
          <div class="yx-dialog__footer" v-loading="loading">
            <slot name="footer">
              <div>
                <slot name="button">
                  <el-button
                    v-for="(item  , index) in rightButtonData"
                    :key="index"
                    :type="item.type"
                    @click="button({ index: index, value: item.value })"
                  >{{ item.value }}</el-button>
                </slot>
              </div>
            </slot>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang='ts' >
import elDragDialog from './drag'
import { defineComponent, watch, getCurrentInstance, ref, PropType } from 'vue'
interface RightButtonData {
  value: string,
  type: string
}

//接口要放在export default defineComponent的外面
interface param {
  value: string,
  index: Number,
}

export default defineComponent({
  name: 'YxDialog',
  emits: ['button'], //消除non-emits的警告
  inheritAttrs: false,
  directives: {
    elDragDialog,
  },
  props: {
    /* 饿了么ui的属性 */
    // 是否显示  //这就是v-model
    modelValue: {
      type: Boolean,
      default: () => false,
    },

    // 标题
    title: {
      type: String,
      default: () => '标题',
    },

    // 宽度
    width: {
      type: String,
      default: () => '50%',
    },

    // 是否可以通过esc按钮关闭
    closeOnPressEscape: {
      type: Boolean,
      default: () => false,
    },

    // 是否可以通过点击模态框关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: () => false,
    },

    /* 自定义的属性 */

    // 内容
    content: {
      type: String,
      default: () => '这是内容',
    },

    // 标题样式修改
    titleStyle: {
      type: Object,
      default: () => { },
    },

    // 是否可以拖拽
    isDrag: {
      type: Boolean,
      default: () => false,
    },

    // 是否添加loading
    loading: {
      type: Boolean,
      default: () => false,
    },



    // 右边按钮数据
    rightButtonData: {
      type: Array as PropType<RightButtonData[]>,
      default: () => [
        {
          value: '取 消',
        },
        {
          type: 'primary',
          value: '确 定',
        },
      ],
    },

    // 点击确定是否关闭Dialog
    isSureClose: {
      type: Boolean,
      default: () => true,
    },
  },

  setup(props, { emit }) {
    const { modelValue, isSureClose } = props
    const isShow = ref(false)
    //接口
   
    const button = (param: param) => {
      let { value } = param || {}
      value = value.replace(/\s*/g, '')
      if (value === '取消' || isSureClose) {
        isShow.value = false
      }
      emit('button', param)
    }

    //监听
    watch(
      () => modelValue,
      (newValue) => {
        isShow.value = newValue
      },
      {
        immediate: true,
      }
    )
    return {
      isShow,
      button,
    }
  },
})
</script>

<style lang="scss" >
@import "./dialog.scss";
</style>
